<template>
    <div class="template">
        <img :src="homeBG" style="width: 100%;height: 100%;" />
        <img :src="puzzle" class="puzzle" @click="router.push('/make')"/>
        <img :src="store" class="store" @click="router.push('/store')"/>
    </div>
</template>
<script setup>
import homeBG from '../assets/homeBG.png'
import puzzle from '../assets/puzzle.png'
import store from '../assets/store.png'
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';
const router = useRouter()
onMounted(() => {
    if(!localStorage.getItem('PuzzleEditFirst')) {
        localStorage.setItem('PuzzleEditCoinsNum', 20)
        localStorage.setItem('PuzzleEditFirst', 1)
	}
})
</script>
<style scoped>
.puzzle {
    width: 42vw;
    position: absolute;
    left: 0;
    top: 35vh;
}
.store {
    width: 42vw;
    position: absolute;
    right: 0;
    bottom: 5vh;
}
</style>